import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Bars } from '@/components/charts/bars';
import { LineChart } from '@/components/charts/line-chart';
import { Sparkline } from '@/components/charts/sparkline';
import { CompanyTable } from '@/components/company/company-table';
import { EventList } from '@/components/events/event-row';
import { EventTypeBadge } from '@/components/ui/badges';
import { Container, Empty, Note, PageHeader, Section, Stat, StatGrid } from '@/components/ui/section';
import { api, ApiError, safe } from '@/lib/api';
import { countryName } from '@/lib/countries';
import { fmtInt, fmtPctSigned, fmtScore } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CompanyCard, IndustryDetailRaw } from '@/lib/types';

export const revalidate = 300;

async function load(slug: string): Promise<IndustryDetailRaw> {
  try {
    return await api.industry(slug);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const d = await safe(api.industry(slug));
  if (!d) return { title: 'Industry' };
  return { title: `${d.name} — industry atlas`, description: `${d.name}: ${Array.isArray(d.companies) ? d.companies.length : d.companies} monitored companies, ${d.events_30d} structured events in 30 days, hiring momentum ${fmtPctSigned(d.hiring_momentum_30d)}.`, alternates: { canonical: `/industry/${slug}` } };
}

export default async function IndustryPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const d = await load(slug);
  const companies: CompanyCard[] = Array.isArray(d.companies) ? d.companies : [];
  const count = Array.isArray(d.companies) ? d.companies.length : d.companies;
  const countries = d.countries ?? [];
  return (
    <Container wide>
      <PageHeader
        eyebrow={
          <>
            <Link href={routes.industries()} className="hover:text-ink">
              Industry atlas
            </Link>
            {d.parent_slug && (
              <>
                <span>/</span>
                <Link href={routes.industry(d.parent_slug)} className="hover:text-ink">
                  {d.parent_slug.replace(/-/g, ' ')}
                </Link>
              </>
            )}
          </>
        }
        title={d.name}
        lede={d.description ?? `Monitored companies classified under ${d.name}.`}
      />
      <StatGrid cols={6}>
        <Stat label="Companies" value={fmtInt(count)} size="sm" />
        <Stat label="Events 7 d" value={fmtInt(d.events_7d)} size="sm" />
        <Stat label="Events 30 d" value={fmtInt(d.events_30d)} size="sm" />
        <Stat label="Activity" value={fmtScore(d.activity_score)} size="sm" />
        <Stat label="Hiring 30 d" value={fmtPctSigned(d.hiring_momentum_30d)} size="sm" delta={d.hiring ? { value: `${fmtInt(d.hiring.open)} open`, tone: 'neutral' } : undefined} />
        <Stat label="AI adoption" value={fmtScore(d.ai_adoption)} size="sm" />
      </StatGrid>
      <div className="grid gap-8 lg:grid-cols-12">
        <Section eyebrow="Activity" title="Industry activity, 90 days" className="lg:col-span-8">
          {d.series?.length > 1 ? <LineChart series={[{ id: 'activity', label: 'Activity score', points: d.series.map((p) => ({ day: p.day, value: p.value })) }]} height={200} yZero /> : <Empty compact title="Not enough history yet." />}
        </Section>
        <Section eyebrow="Composition" title="Countries" className="lg:col-span-4">
          {countries.length ? <Bars dense rows={countries.slice(0, 10).map((c) => ({ key: c.country, label: countryName(c.country), value: c.companies, href: routes.country(c.country) }))} /> : <Empty compact />}
          {d.top_event_types?.length > 0 && (
            <p className="mt-4 flex flex-wrap items-center gap-1 text-xs text-ink-3">
              Top event types:
              {d.top_event_types.map((t) => (
                <EventTypeBadge key={t} type={t} small />
              ))}
            </p>
          )}
        </Section>
      </div>
      <Section eyebrow="Companies" title="Most active monitored companies" action={{ href: routes.companies({ industry: slug }), label: 'All in directory' }}>
        <CompanyTable items={companies} />
      </Section>
      <div className="grid gap-8 lg:grid-cols-12">
        <Section eyebrow="Events" title="Latest structured events" action={{ href: routes.events({ industry: slug }), label: 'All events' }} className="lg:col-span-8">
          <EventList events={d.events ?? []} variant="table" />
        </Section>
        <Section eyebrow="Trending" title="Terms gaining momentum" className="lg:col-span-4">
          {d.trending?.length ? (
            <ul className="divide-y divide-rule border-y border-rule text-sm">
              {d.trending.slice(0, 8).map((t) => (
                <li key={t.term} className="flex items-center gap-2 py-1.5">
                  <span className="min-w-0 flex-1 truncate">{t.term}</span>
                  <Sparkline values={t.series} width={48} height={14} />
                  <span className={`tnum text-xs ${(t.momentum ?? 0) > 0 ? 'text-positive' : 'text-ink-3'}`}>{fmtPctSigned(t.momentum, 0)}</span>
                </li>
              ))}
            </ul>
          ) : (
            <Empty compact />
          )}
          <Note className="mt-3">Hiring: {d.hiring ? `${fmtInt(d.hiring.new_30d)} new and ${fmtInt(d.hiring.removed_30d)} no-longer-listed roles in 30 days across monitored careers pages.` : 'summary unavailable.'}</Note>
        </Section>
      </div>
    </Container>
  );
}